<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>I18n Translate</title>
    <style>
        main {
            min-width: 1200px;
            max-width: 1200px;
            margin: 0 auto;
        }
        form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
    </style>
</head>
<body>
    <main>
        <h1>I18n Translate</h1>
        <form action="/translate" method="post" enctype="multipart/form-data">
            <input id="ipt" type="file" name="file" accept=".js,.json"><br>
            <input type="submit">
        </form>
    </main>

    <script>
        window.onload = () => {
            let ipt = document.getElementById('ipt')
            ipt.onchange = function (){
                let file = this.files && this.files[0]
                if(file){
                    if(file.type == "text/javascript" || file.type == "application/json"){
                        console.log("允许的文件")
                    }else{
                        console.log(this.files)
                        alert("只支持上传：.js,.json 类型的文件")
                    }
                }else{
                    alert('啊?文件呢?')
                }
                console.log(file, 'file')
            }
        }
    </script>
</body>
</html>